<template>
    <div class="app-container">
        <div class="search-container">
            <el-form :model="searchObj" :inline="true">
                <el-form-item label="模块标题" prop="title">
                    <el-input v-model="searchObj.title" placeholder="模块标题" @keyup.enter="fetchData" />
                </el-form-item>
                <el-form-item label="操作时间">
                    <el-date-picker v-model="createTimes" type="datetimerange" range-separator="至" start-placeholder="开始时间"
                        end-placeholder="结束时间" value-format="yyyy-MM-dd HH:mm:ss" style="margin-right: 10px;width: 100%;" />
                </el-form-item>
                <el-form-item>
                    <el-button class="filter-item" type="primary" icon="el-icon-search" @click="fetchData()">
                        搜索
                    </el-button>
                    <el-button @click="resetData"> <i-ep-refresh />重置 </el-button>
                </el-form-item>
            </el-form>
        </div>

        <el-table v-loading="listLoading" :data="list" stripe border style="width: 100%; margin-bottom: 20px; "
            max-height="520" @selection-change="handleSelectionChange">
            <el-table-column type="selection" />
            <el-table-column label="序号" width="70" align="center" fixed>
                <template slot-scope="scope">
                    {{ (page - 1) * size + scope.$index + 1 }}
                </template>
            </el-table-column>
            <el-table-column prop="title" width="200" label="模块标题" />
            <el-table-column prop="businessType" label="业务类型" />
            <el-table-column prop="method" label="方法名称" :show-overflow-tooltip="true" />
            <el-table-column prop="requestMethod" label="请求方式" />
            <el-table-column prop="operatorType" label="操作类别" width="140" />
            <el-table-column prop="operName" label="操作人员" />
            <el-table-column prop="deptName" label="部门名称" />
            <el-table-column prop="operUrl" label="请求URL" :show-overflow-tooltip="true" />
            <el-table-column prop="operIp" label="主机地址" />
            <el-table-column prop="operParam" label="请求参数" :show-overflow-tooltip="true" />
            <el-table-column prop="jsonResult" label="返回参数" :show-overflow-tooltip="true" />
            <el-table-column prop="status" label="操作状态" width="140">
                <template #default="scope">
                    <el-tag v-if="scope.row.status == 0" type="danger">异常</el-tag>
                    <el-tag v-if="scope.row.status == 1" type="success">正常</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="errorMsg" label="错误消息" />
            <el-table-column prop="operTime" label="操作时间" />
            <el-table-column prop="createTime" label="创建时间" width="160" />
        </el-table>
        <el-pagination @current-change="fetchData" @size-change="handleSizeChange" :current-page="page"
            :page-sizes="[10, 20, 50, 100]" :page-size="size" layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
    </div>
</template>
<script>
//引入定义接口的js文件
import api from '@/api/system/operLog'

export default {
    //定义初始值
    data() {
        return {
            listLoading: false,//是否显示加载
            list: [],//角色列表
            total: 0,//总记录数
            page: 1,//当前页
            size: 10,//每页显示记录数
            searchObj: {},//条件查询封装对象

            dialogVisible: false,//弹出框
            sysRole: {}, //封装添加表单数据
            selectValue: [] //复选框选择内容封装数组
        }
    },
    //页面渲染之前执行
    created() {
        //调用列表方法
        this.fetchData()
    },
    methods: {//具体方法
        handleSizeChange(val) {
            this.size = val
            this.fetchData()
        },
        //复选框发生变化执行方法
        handleSelectionChange(selection) {
            this.selectValue = selection
            //console.log(this.selectValue)
        },
        //重置
        resetData() {
            //清空表单
            this.searchObj = {}
            //查询所有数据
            this.fetchData()
        },
        //条件分页查询列表
        //pageNum 查询页数
        fetchData(pageNum = 1) {
            this.listLoading = true;
            //页数赋值
            this.page = pageNum
            if (this.createTimes && this.createTimes.length == 2) {
                this.searchObj.createTimeBegin = this.createTimes[0]
                this.searchObj.createTimeEnd = this.createTimes[1]
            }
            //ajax
            api.getPageList(this.page, this.size, this.searchObj)
                .then(response => {
                    //每页数据列表
                    this.list = response.data.list
                    //总记录数
                    this.total = response.data.total
                }).finally(() => {
                    this.listLoading = false;
                })
        }
    }
}
</script>